<template>
  <!-- 小说详情页 -->
  <div>
    <!-- 小说简介 -->
    <div class="box_con">
      <!-- 导航栏 -->
      <div class="con_top">
        <a href="javascript:;" @click="JumpRoute('/index')">书荒网</a
        >&nbsp;&nbsp;>&nbsp;&nbsp;
        <a href="javascript:;" @click="JumpCatesRoute(book_cates_route)">{{
          bookInfos.book_cate
        }}</a
        >&nbsp;&nbsp;>&nbsp;&nbsp;
        <span>{{ bookInfos.book_name }}最新章节目录</span>
      </div>
      <!-- 详情介绍 -->
      <div id="maininfo">
        <div id="info">
          <h1>{{ bookInfos.book_name }}</h1>
          <p>作&nbsp;&nbsp;&nbsp;&nbsp;者：{{ bookInfos.book_author }}</p>
          <p>
            动&nbsp;&nbsp;&nbsp;&nbsp;作：
            <a href="javascript:;" @click="AddBookSelf(bookInfos.book_id)"
              >加入书架</a
            >,&nbsp; <a href="javascript:;">投推荐票</a>,&nbsp;
            <a href="javascript:;" @click="showToBottom">直达底部</a>
          </p>
          <p>最后更新：{{ bookInfos.dtime }}</p>
          <p>
            最新章节：
            <a
              href="javascript:;"
              @click="
                JumpChapterRoute(bookInfos.book_id, bookInfos.book_newest_url)
              "
              >{{ bookInfos.book_newest_name }}</a
            >
          </p>
        </div>
        <div id="intro">
          <p>
            <font style="color:#0066FF">
              <a href="javascript:;" target="_blank"
                >手机阅读《{{
                  bookInfos.book_name
                }}》无弹窗纯文字全文免费阅读————有待开发，敬请期待</a
              >
            </font>
          </p>
          <p>{{ bookInfos.book_desc }}</p>
        </div>
      </div>
      <!-- 图片 -->
      <div id="sidebar">
        <div id="fmimg">
          <img
            :src="bookInfos.image_urls"
            :alt="bookInfos.book_name"
            width="120"
            height="150"
          />
        </div>
      </div>
      <!-- 推荐小说limit15 -->
      <div id="recommend">
        &nbsp;&nbsp;推荐阅读：
        <a
          href="javascript:;"
          v-for="item in bookrecomlist"
          :key="item.id"
          @click="JumpDetailRoute(item.book_id)"
          >{{ item.book_name }}&nbsp;&nbsp;&nbsp;&nbsp;</a
        >
      </div>
    </div>
    <!-- 小说章节 -->
    <div class="box_con">
      <div id="list">
        <dl>
          <!-- 小说最新12章节 -->
          <dt>
            《
            <a href="javascript:;" :title="bookInfos.book_name">{{
              bookInfos.book_name
            }}</a>
            》最新章节
          </dt>
          <div id="newchapter">
            <dd v-for="item in booknewestlist" :key="item.id">
              <a
                href="javascript:;"
                :title="item.detail_title"
                @click="JumpChapterRoute(item.book_id, item.sort_id)"
                >{{ item.detail_title }}</a
              >
            </dd>
          </div>
          <!-- 小说全部章节 -->
          <dt>
            《
            <a href="javascript:;" :title="bookInfos.book_name">{{
              bookInfos.book_name
            }}</a>
            》全部章节
          </dt>
          <dd v-for="item in bookalllist" :key="item.id">
            <a
              href="javascript:;"
              :title="item.detail_title"
              @click="JumpChapterRoute(item.book_id, item.sort_id)"
              >{{ item.detail_title }}</a
            >
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
// import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
import '../../assets/css/detail.css'
export default {
  data() {
    return {
      // 小说详情数据列表
      bookInfos: [],
      // 小说分类
      book_cates: '',
      // 小说分类路由
      book_cates_route: '',
      // 小说详情id
      book_detail_id: '',
      // 推荐小说数据列表
      bookrecomlist: [],

      // 小说最新12章节数据列表
      booknewestlist: [],
      // 小说全部章节数据列表
      bookalllist: []
    }
  },
  created() {
    // 获取路由传递过来的 小说分类id
    this.book_detail_id = this.$route.params.id
    // console.log('小说book_id：',this.book_detail_id)

    // 获取小说详情数据
    this.getBookInfos()
    // 获取小说最新12章节数据
    this.getBookNewest()
    // 获取小说全部章节
    this.getBookAll()
  },

  methods: {
    // 点击事件跳转路由
    JumpRoute(url) {
      // 跳转路由
      this.$router.push({ path: url })
    },
    // 点击事件，跳转小说详情页
    JumpDetailRoute(book_id) {
      this.$router.push({
        path: '/book/' + book_id
      })
    },
    // 点击事件跳转分类小说
    JumpCatesRoute(url) {
      this.$router.push({ path: url })
    },
    // 点击事件，跳转小说章节页
    JumpChapterRoute(book_id, sort_id) {
      this.$router.push({ path: '/chapter/' + book_id + '/' + sort_id })
    },
    // 获取小说详情数据
    async getBookInfos() {
      const { data: res } = await this.$http.get(
        `get_book_detail/${this.book_detail_id}`
      )

      if (res.status !== 200) {
        return this.$message.error('获取小说详情数据失败！')
      }

      this.bookInfos = res.data[0]
      // console.log(this.bookInfos)
      this.book_cates = res.data[0].book_cate
      this.book_cates_route = this.$store.state.fiction_cate[this.book_cates]

      // 获取详情页小说推荐limit15
      const { data: recom } = await this.$http.get(
        `get_book_detail_recom/${this.book_cates}`
      )

      if (recom.status !== 200) {
        return this.$message.error('获取小说推荐数据失败！')
      }

      this.bookrecomlist = recom.data
      // console.log(this.bookrecomlist)
    },
    // 获取小说最新12章节数据列表
    async getBookNewest() {
      const { data: res } = await this.$http.get(
        `get_book_detail_newest/${this.book_detail_id}`
      )

      if (res.status !== 200) {
        return this.$message.error('获取小说最新章节数据失败！')
      }

      this.booknewestlist = res.book_newest
      // console.log(this.booknewestlist)
    },
    // 获取小说全部章节数据列表
    async getBookAll() {
      const { data: res } = await this.$http.get(
        `get_book_detail_all/${this.book_detail_id}`
      )

      if (res.status !== 200) {
        return this.$message.error('获取小说全部章节数据失败！')
      }

      this.bookalllist = res.book_all
      // console.log(this.bookalllist)
    },
    // 点击事件，直达页面底部
    showToBottom() {
      // 滚动内容的坐标位置0,50000：
      window.scrollTo(0, 50000)
    },
    // 点击事件，加入书架
    async AddBookSelf(book_id) {
      // 先判断用户是否登录，从本地获取token值
      const token = window.sessionStorage.getItem('token')

      if (!token) return this.$message.info('请优先登录用户！')

      const addbookform = {
        "book_id": book_id
      }
      // 提交添加书籍请求
      const { data: res } = await this.$http.post(`get_info_bookself`, addbookform)
      // 判断请求是否成功
      if (res.status !== 200) {
        return this.$message.error(res.msg)
      }

      // 否则加入书架成功
      this.$message.success(res.msg)
    }
  } 
  // 此时，页面上的元素，已经被渲染完毕了！
  //   async mounted() {
  //   },
}
</script>
